<template>
    <div class="common_footer" style="position: inherit;">
        <tabbar @on-index-change="checkItem">
            <tabbar-item :selected="checkIndex === 0">
                <img slot="icon" v-if="checkIndex === 0" src="../../static/images/homeYes.png"/>
                <img slot="icon" v-else src="../../static/images/homeNo.png"/>
                <span slot="label">首页</span>
            </tabbar-item>
            <tabbar-item :selected="checkIndex === 1">
                <img slot="icon" v-if="checkIndex === 1" src="../../static/images/historyHotYes.png">
                <img slot="icon" v-else src="../../static/images/historyHotNo.png">
                <span slot="label">历史爆款</span>
            </tabbar-item>
            <tabbar-item :selected="checkIndex === 2">
                <img slot="icon" v-if="checkIndex === 2" src="../../static/images/yuyueProductYes.png">
                <img slot="icon" v-else src="../../static/images/yuyueProductNo.png">
                <span slot="label">预约产品</span>
            </tabbar-item>
            <tabbar-item :selected="checkIndex === 3">
                <img slot="icon" v-if="checkIndex === 3" src="../../static/images/personCenterYes.png">
                <img slot="icon" v-else src="../../static/images/personCenterNo.png">
                <span slot="label">个人中心</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>


<script>
    import {Tabbar, TabbarItem} from 'vux'

    export default {
        name: "tabCard",
        components: {
            Tabbar,
            TabbarItem,
        },
        data() {
            return {
                checkIndex: Number(window.sessionStorage.getItem('checkIndex'))
            }
        },
        methods: {

            checkItem(index) {

                this.checkIndex = index;
                window.sessionStorage.setItem('checkIndex', index)

                switch (index) {
                    case 0 :
                        this.$tools.goPage('/index')
                        break;
                    case 1 :
                        this.$tools.goPage('/historyHot')
                        break;
                    case 2 :
                        this.$tools.goPage('/yuyueProduct')
                        break;
                    case 3 :
                        this.$tools.goPage('/personCenter')
                        break;
                }

            },

        }
    };
</script>
<style lang="less" rel="stylesheet/less" type="text/less">
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon
    > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
        color: #F1A260 !important
    }
</style>
